
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:replace="common/base::pagetitle"></title>
    <link th:replace="common/base::static"/>
</head>
<body style="background-color: #f2f2f2;">

<div id="kPage" class="layui-fluid" style="padding: 0">
    <div class="layui-row">
        <!-- 主要内容块 -->
        <div class="layui-col-md12" id="kMainContentCol">
            <div class="layui-fluid kvf-fluid-padding15">
                <div class="layui-card">
                    <form>
                        <div class="layui-form layui-card-header kvf-card-header-auto">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">表名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="tableName" placeholder="请输入表名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn " lay-submit="" lay-filter="kTableSearchFilter">
                                        <i class="layui-icon layui-icon-search"></i>
                                    </button>
                                    <button class="layui-btn " type="reset" data-event="refresh">
                                        <i class="layui-icon layui-icon-refresh-1"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="layui-card-body">
                        <table id="kTable" lay-filter="kTable"></table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="layui-container" style="display: none; width: 100%;" id="tableTypeTpl">
    <div class="layui-form" lay-filter="tableTypeForm" style="margin-top: 15px">
        <div class="layui-form-item">
            <label class="layui-form-label">表格类型</label>
            <div class="layui-input-block">
                <input type="radio" name="tableType" value="table" title="普通表格(layui table)" autocomplete="off" class="layui-input" checked>
                <input type="radio" name="tableType" value="tree_grid" title="树形表格(treegrid)" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit="" lay-filter="kTableTypeFormSubmit" id="kTableTypeFormSubmit" value="确认添加">
        </div>
    </div>
</div>


<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>

<!--头部工具栏模板-->
<script type="text/html" id="headToolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="batchGen">批量生成</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="download">下载代码</button>
    </div>
</script>

<!--表格行工具栏模板-->
<script type="text/html" id="rowToolbarTpl">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="fastGen"><i class="layui-icon layui-icon-fonts-code"></i>快速生成</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="customGen"><i class="layui-icon layui-icon-fonts-code"></i>自定义生成</a>
</script>

<script type="text/javascript" th:inline="javascript">
    layui.use(['element', 'form', 'layer', 'table'], function () {
        var elemet = layui.element, form = layui.form, layer = layui.layer, table = layui.table;
        var tableId = 'kTable';

        // 实例化table
        var tableIns = table.render($.extend(config.layui.table, {
            elem: '#' + tableId
            ,url: api.gen.tableListData //数据接口
            ,toolbar: '#headToolbarTpl'
            ,defaultToolbar: []
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'}
                ,{field: 'tableName', title: '表名', width:180}
                ,{field: 'tableComment', title: '备注'}
                ,{field: '', title: '操作', width: 235, fixed: 'right', templet: '#rowToolbarTpl'}
            ]]
        }));

        var area = ['449px', '95%'];

        var cds = [];
        // 监听表格头部事件
        table.on('toolbar(' + tableId + ')', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var checkData = checkStatus.data; // 得到选中的数据

            if (obj.event === 'batchGen') {
                if (checkData.length === 0) {
                    return kvfKit.warningMsg('请选择要生成代码的表数据');
                }
                cds = checkData;
                tOpenId = choiceTpl();
            }

            if (obj.event === 'download') {
                // 先检查是否已生成代码包
                kvfKit.aGet(api.gen.checkCodeZipIsExists, function (r) {
                    if (r.code === req.status.ok) {
                        window.open(api.gen.downloadCodeZip);
                    } else {
                        kvfKit.warningMsg(r.msg);
                    }
                });
            }
        });

        // 表格行按钮 监听事件
        var tOpenId, tableName, tableComment;
        table.on('tool(' + tableId + ')', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'fastGen') {
                tableName = data.tableName;
                tableComment = data.tableComment;
                tOpenId = choiceTpl();
            }
            if (layEvent === 'customGen') {
                var idx = layer.open({
                    type: 2
                    ,title: '自义定生成设置'
                    ,content: api.gen.customGenerateSetting + data.tableName + "?tableComment=" + data.tableComment
                    ,maxmin: true
                    ,area: area   // 宽高
                    ,btn: ['生成代码', '预览(树形表格预览不了)', '取消']
                    ,yes: function(index, layero){
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#kFormSubmit");
                        submit.click();
                    }
                    ,btn2: function (index, layero) {
                        var submit = layero.find('iframe').contents().find("#preview");
                        submit.click();
                        return false;
                    }
                });
                layer.full(idx);
            }

        });

        function choiceTpl() {
            return layer.open({
                type: 1
                , title: '选择模板'
                , content: $('#tableTypeTpl')
                , maxmin: false
                , area: ['553px', '176px']   // 宽高
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    $('#kTableTypeFormSubmit').click();
                }
            });
        }

        form.on('submit(kTableTypeFormSubmit)', function (obj) {
            var field = obj.field;
            var url, data, contentType;
            if (cds.length === 0) {
                data = {};
                data.tableType = field.tableType;
                data.tableName = tableName;
                data.tableComment = tableComment;
                url = api.gen.quicklyGenerateCode;
                contentType = 'application/x-www-form-urlencoded;charset=utf-8';
            } else {
                data = cds;
                $.each(data, function (i, item) {
                    item.tableType = field.tableType;
                });
                data = JSON.stringify(data);
                url = api.gen.quicklyGenerateCodeBatch;
                contentType = 'application/json';
            }

            $.ajax({
                type: req.type.post,
                url: url,
                data: data,
                contentType: contentType,
                success: function (r) {
                    if (r.code === req.status.ok) {
                        kvfKit.sucessMsg('代码生成成功');
                    } else {
                        kvfKit.errorMsg(r.msg);
                    }
                }
            });
            layer.close(tOpenId);
        });

        // 监听查询
        form.on('submit(kTableSearchFilter)', function (obj) {
            renderTableData(obj.field);
            return false;
        });

        var active = {
            refresh: function () {
                var $form = $('form');
                $form[0].reset();
                renderTableData(kvfKit.getFormJson($form));
            }
        };

        kvfKit.activeInit(active);

        function renderTableData(params) {
            params = params ? params : {};
            log('seach=', params); //

            tableIns.reload({
                where: params,
                page: {curr: 1}
            });
        }

        // 绑定监听回车事件
        kvfKit.bindEnterEventForLayuiForm();

    });
</script>

</body>
</html>